<template>
  <div
    :class="[
      'cim-tree-collapse-list',
      `cim-tree-collapse-list--${theme}`
    ]"
  >
    <tree-collapse-item
      v-for="data in dataList"
      :key="data[configuration.id]"
      :dataObject="data"
      :configuration="configuration"
      :activeWrapId.sync="_activeWrapId"
      :activeItemId.sync="_activeItemId"
      @delete="handleDeleteItem"
      @selectItem="data => $emit('selectItem', data)"
    ></tree-collapse-item>

    <div
      v-if="!dataList.length"
      class="cim-tree-collapse-list__noData"
      :style="{ backgroundImage: `url('${emptyBackground}')` }"
    >暂无数据</div>
  </div>
</template>

<script>
import '../../../styles/tree-collapse-list.less'
import { BasedDescriptionHoc } from '../../../index'
import TreeCollapseItem from './tree-collapse-item.js'

export default {
  name: 'CimTreeCollapseList',
  components: {
    TreeCollapseItem: BasedDescriptionHoc(TreeCollapseItem, 'dataObject')
  },
  props: {
    // 数据列表
    dataList: {
      type: Array,
      default: () => []
    },
    // 数据配置
    configuration: {
      type: Object,
      default: () => ({})
    },
    // 动画类型
    animationType: {
      type: String,
      default: 'bothway',
      validator: function (value) {
        return ['none', 'single', 'bothway'].includes(value)
      }
    },
    // 显示状态箭头
    showIcon: {
      type: Boolean,
      default: true
    },
    // body背景色
    bodyBackgroundColor: {
      type: String,
      default: '#f9f9f9'
    },
    // 手风琴模式
    accordion: {
      type: Boolean,
      default: true
    },
    // item可删除
    cancelableSelf: {
      type: Boolean,
      default: true
    },
    // 当前激活的ID
    // 一级菜单Id
    activeWrapId: {
      type: [String, Number, Array],
      default: ''
    },
    // 二级菜单ID
    activeItemId: {
      type: [String, Number],
      default: ''
    },
    // 主题风格
    theme: {
      type: String,
      default: 'card',
      validator: function (value) {
        return ['card', 'control', 'control2']
      }
    }
  },
  provide () {
    return {
      animationType: this.animationType,
      showIcon: this.showIcon,
      accordion: this.accordion,
      bodyBackgroundColor: this.bodyBackgroundColor,
      cancelableSelf: this.cancelableSelf
    }
  },
  data () {
    return {
      // 为空时背景图
      emptyBackground: require('./images/empty-background.png')
    }
  },
  computed: {
    // 选中的一级菜单id
    _activeWrapId: {
      get () {
        return this.activeWrapId
      },
      set (id) {
        this.$emit('update:activeWrapId', id)
      }
    },
    // 选中的item id
    _activeItemId: {
      get () {
        return this.activeItemId
      },
      set (id) {
        this.$emit('update:activeItemId', id)
      }
    }
  },
  methods: {
    handleDeleteItem (id) {
      this.$emit('delete', id)
    }
  }
}
</script>
